<template>
  <div class="comment">
    <!-- 评论列表 -->
    <van-list @load='onLoad' v-model="loading" :finished="finished" finished-text="没有更多了">
      <van-cell v-for='item in list' :key='item.com_id.toString()'>
        <div class="item van-hairline--bottom van-hairline--top">
          <van-image round width="1rem" height="1rem" fit="fill" :src="item.aut_photo" />
          <div class="info">
            <p>
              <span class="name">{{item.aut_name}}</span>
              <span style="float:right">
                <span class="van-icon van-icon-good-job-o zan"></span>
                <span class="count">{{item.like_count}}</span>
              </span>
            </p>
            <p>{{item.content}}</p>
            <p>
              <span class="time">{{item.pubdate|timeFormat}}</span>&nbsp;
              <van-tag plain @click="showReply=true">{{item.reply_count}} 回复</van-tag>
            </p>
          </div>
        </div>
      </van-cell>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field v-model="value" placeholder="写评论...">
        <span @click="handleSubmit" class="submit" slot="button">提交</span>
      </van-field>
    </div>
  </div>
</template>
<script>
import { getComments, comment } from '@/api/articles.js'
export default {
  // 父组件传过来的id值
  props: {
    articleId: {
      type: String
    }
  },
  data () {
    return {
      // 评论框内容
      value: '',
      loading: false,
      finished: false,
      //   评论列表
      list: [],
      //   偏移量
      offset: null
    }
  },
  methods: {
    //   评论
    async handleSubmit () {
      try {
        // 评论请求
        await comment({
          target: this.articleId,
          content: this.value
        })
        // 需要手动修改状态位为true （防止一页数据不够）
        this.loading = true
        // 在刷新列表之前需要先把list清空 为了防止多次加载一样的数据
        this.list = []
        // 刷新列表
        this.onLoad()
        // 清空输入框
        this.value = ''
      } catch (error) {
        this.$$toast.fail('评论失败')
      }
    },
    //   评论列表
    async onLoad () {
      try {
        const ret = await getComments(this.articleId, this.offset)
        //   console.log(ret)
        //   因为有分页 所以需要push进list
        this.list.push(...ret.data.results)
        //   加载本页完成手动关闭
        this.loading = false
        // 判断什么时候结束完成
        if (ret.data.last_id === ret.data.end_id) {
          this.finished = true
        } else {
          // 把下次查询的起始id记录一下
          this.offset = ret.data.last_id
        }
      } catch (error) {
        this.$toast.fail('获取评论列表失败')
      }
    }
  }
}
</script>
<style scoped lang='less'>
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    .info {
      flex: 1;
      padding-left: 10px;
      .name {
        color: #069;
      }
      .zan {
        vertical-align: middle;
        padding-right: 2px;
      }
      .count {
        vertical-align: middle;
        font-size: 10px;
        color: #666;
      }
      .time {
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #3296fa;
  }
}
</style>
